<template>
  <div class="product_list mt1 pd3">
    <div
      v-for="product in productList"
      :key="product.product_id"
      class="product_info"
      @click="goInfo(product.product_id)"
    >
      <div class="pdt_image">
        <img
          :src="'http://localhost:8090/' + product.product_imge"
          alt="商品图片"
        />
      </div>
      <div class="pdt_dsc">
        <p class="dsc">
          {{ product.product_dsc }}
        </p>
        <p class="price fcred">{{ '￥' + product.product_price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import home from '@/api/home.js'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
export default {
  components: {
    [showToast.name]: showToast,
  },
  setup() {
    const productList = ref([])
    const router = useRouter()

    onMounted(() => {
      home.getproductList().then((res) => {
        if (res.status === 200 && res.data) {
          productList.value = res.data
        }
      })
    })

    const goInfo = (product_id) => {
      router.push({
        name: 'ProductInfo',
        params: { productId: product_id },
      })
    }

    return {
      productList,
      goInfo,
    }
  },
}
</script>

<style scoped>
.product_list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 33px;
}

.product_info {
  flex: 1 0 calc(50% - 6px);
  height: 13rem;
  padding: 3px;
  margin: 2px 3px;
  box-sizing: border-box;
  display: flex;
  border-radius: 8px;
  flex-flow: column;
  background-color: #ffffff;
}

.pdt_image {
  flex: 7;
  overflow: hidden;
}

.pdt_image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdt_dsc {
  flex: 3;
  display: flex;
  flex-flow: column;
}

.dsc {
  flex: 1;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  line-height: 2rem;
}

.price {
  flex: 1;
}
</style>
